<template>
    <div class="case-code-container">
        <div id="bar-case-3" class="chart-container">

        </div>
        <highlightjs class="code" lang="js" :code="code"></highlightjs>
    </div>
</template>

<script setup>
    /**
     * 柱条的样式可以通过 series.itemStyle 设置，包括：
        柱条的颜色（color）；
        柱条的描边颜色（borderColor）、宽度（borderWidth）、样式（borderType）；
        柱条圆角的半径（barBorderRadius）；
        柱条透明度（opacity）；
        阴影（shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY）。
     */
    import { code } from './code/case3';
    import * as echarts from 'echarts';
    import { onMounted } from 'vue';
    onMounted(() => {
        // 基于准备好的dom，初始化echarts实例
        const dom = document.getElementById('bar-case-3');
        const myChart = echarts.init(dom, 'dark', { renderer: 'svg' });

        // 绘制图表
        myChart.setOption({
            title: { text: '柱状图样式设置' },
            tooltip: {},
            xAxis: {
                type: 'category',
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
            },
            yAxis: { type: 'value' },
            series: [
                // 系列1
                {
                    name: '销量(男)',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20],
                    // ★★★设置整个系列的的样式
                    itemStyle: {
                        color: '#f00',
                        borderWidth: 2,
                        borderType: 'dashed',
                        borderColor: '#73c0de',
                        opacity: 0.5,
                        // ★★★如下设置无效
                        // barWidth: '10px',
                    },
                    // ★★★柱条宽度可以通过 barWidth 设置。
                    barWidth: '10px',
                    // 通常而言，设置 barGap 及 barCategoryGap 后，就不需要设置 barWidth 了，这时候的宽度会自动调整。
                    // ★★★不同系列在同一类目下的距离 barGap
                    barGap: 1,
                    // ★★★类目与类目的距离 barCategoryGap
                    barCategoryGap: 20,
                },
                // 系列2
                {
                    name: '销量(女)',
                    type: 'bar',
                    data: [15, 30, 6, 20, 17, {
                        // ★★★单独设置一个数据项的样式
                        value: 19,
                        itemStyle: { color: '#91cc75', barBorderRadius: 5, shadowBlur: 10, shadowOffsetX: 5, shadowColor: '#fff' },
                    }],
                    // ★★★从 ECharts 4.7.0 版本开始，这一功能可以简单地用 showBackground 开启，并且可以通过 backgroundStyle 配置。
                    showBackground: true,
                    backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' },
                },
            ],
        });
    });
</script>

<style lang="scss" scoped>
</style>
